<template>
  <div>
    <breadCrumb></breadCrumb>
     <header>
        <div class="card" v-if="$store.state.markeMsg.isshow1">
            <el-card class="box-card" v-for="(item,index) in tests" :key="index"> 
            <div slot="header" class="clearfix">
              <span>批阅状况</span>
              <el-tag size="small" :type='item.examState==2? "danger":(item.examState==1? "success":"info")'>{{statusname(item.examState)}}</el-tag>
              <el-button style="float: right; padding: 3px 0" type="text" @click="edittest(item)">批阅试卷</el-button>
            </div>
            <div class="text item">
              考试名称：{{item.examName}}
            </div>
            <div class="text item">
              考试时间：{{item.examTime}}
            </div>
            <div class="text item">
              考试地址：{{item.examAddress}}
            </div>
            <div class="text item">
              考试人数：{{item.classNumber}}
            </div>
          </el-card>
        </div>
        <exammarke v-if="$store.state.markeMsg.isshow2" :name="examName" :id="examId"></exammarke>
     </header>
  </div>
</template>

<script>
// import {mapState} from 'vuex';
import exammarke from '../components/exammarke.vue';
export default {
  components:{
    exammarke,//组件注册
  },
  data() {
    return {
      centerDialogVisible: false,
      editid:'',
      tests:[{examId:'TY0212',examName:'计算机组成原理',examTime:'1212',examAddress:'树人楼',classNumber:'55',examState:1},
      {examId:'TY9999',examName:'高数',examTime:'5454',examAddress:'博文楼',classNumber:'99',examState:1}],
      input:{
        time:'',
        address:'',
        number:'',
      },
      examName:'',
      examId:''
    }
  },
  // computed:{
  //   ...mapState({
  //     tests:state=>state.examMessages.exammessage
  //   })
  // },
  watch:{

  },
  // mounted() {
  //    this.$store.dispatch('getexamMsg')
  // },
  methods: {
    statusname(status){
      if(status==1){
        return '待批阅';
      }
      else {
        return '已批阅';
      }
    },
    edittest({examId,examName,examState}){//解构
      if(examState==2){
        this.$message({
            type: 'info',
            message: '试卷已批阅!不允许重复操作'
          });
        return ;
      }
      this.$store.state.markeMsg.isshow1=false;
      this.$store.state.markeMsg.isshow2=true;
      this.examName=examName,
      this.examId=examId
    },
    search(){
      
    },
    confirmedit(editid){
      console.log(editid);
      this.centerDialogVisible=false;
      this.tests.forEach((element,index) => {
        console.log(element)
        if(element.examId==editid){
          element.time= this.input.time;
          element.examAddress=this.input.address;
          element.classNumber=this.input.number;
        }
      });
    }
  }
}
</script>

<style scoped>
header{
  margin-top: 20px;
}
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 280px;
    display: inline-block;
    margin: 5px 10px;
  }
</style>
